<template>
  <view class="detail-item-container">
    <!-- 图标 & 标题 -->
    <view class="item-header">
      <uni-icons :type="icon" size="20" class="item-icon" />
      <text class="item-title">{{ title }}</text>
    </view>

    <!-- 内容展示 -->
    <view class="item-content">
      <!-- 字符串内容 -->
      <text v-if="isStringContent" class="content-text">{{ content }}</text>

      <!-- 对象内容 -->
      <view v-else-if="isObjectContent" class="content-object">
        <view v-for="(value, key) in content" :key="key" class="content-row">
          <text class="row-key">{{ keyMap[key] || key }}：</text>
          <text class="row-value">{{ value }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'DetailItem',
    props: {
      icon: {
        type: String,
        default: 'info'
      },
      title: {
        type: String,
        required: true
      },
      content: {
        type: [String, Object],
        default: ''
      },
      // 自定义键名映射（用于对象内容）
      keyMap: {
        type: Object,
        default: () => ({
          size: '体型',
          lifespan: '寿命',
          diet: '食性',
          habitat: '栖息地',
          description: '简介'
          // 可根据需要扩展其他字段映射
        })
      }
    },
    computed: {
      isStringContent() {
        return typeof this.content === 'string'
      },
      isObjectContent() {
        return this.content && typeof this.content === 'object'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-item-container {
    margin: 20rpx 0;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 12rpx;

    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .item-icon {
        color: #5cb85c;
        margin-right: 10rpx;
      }

      .item-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .item-content {
      .content-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }

      .content-object {
        .content-row {
          display: flex;
          margin: 15rpx 0;
          font-size: 28rpx;

          .row-key {
            color: #888;
            min-width: 160rpx;
          }

          .row-value {
            color: #333;
            flex: 1;
          }
        }
      }
    }
  }
</style>